<template>
  <li
    @click="toArtist(item)"
    :title="$i18n.locale === 'zh' ? item.fullCname : item.fullName"
  >
    <div class="cover">
      <div class="image">
        <el-image
          :key="item.imgUrl"
          fit="contain"
          :src="require('@/assets/images/' + item.imgUrl + '.jpg')"
        >
          <div slot="placeholder" class="image-slot flex-center flex-column">
            <i class="iconfont el-icon-loading"></i>
            <p>{{ $t("public.loading") }}<span class="dot">...</span></p>
          </div>
          <div slot="error" class="image-slot flex-center">
            <img src="@/assets/images/defaultCover.png" />
          </div>
        </el-image>
      </div>
    </div>
    <div class="info">
      <p
        class="name ellipsis"
        v-text="
          $i18n.locale === 'zh'
            ? item.fullCname || item.fullName || item.stageName
            : item.fullName || item.stageName
        "
      ></p>
      <!-- <p class="count" v-if="item.musicSize">单曲数{{ item.musicSize }}</p> -->
    </div>
  </li>
</template>

<script>
// import { mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  props: {
    item: {
      type: Object,
    },
  },
  components: {},
  computed: {
    isMobile() {
      return this.$store.getters.isMobile;
    },
  },
  watch: {},
  methods: {
    // 跳转歌手页面
    toArtist(item) {
      if (this.isMobile) {
        this.$router.push({
          name:
            item.moduleId == 516
              ? "classicalMArtistDetail"
              : item.moduleId == 518
              ? "nationalMArtistDetail"
              : "jazzMArtistDetail",
          params: {
            personId: item.personId,
            personTypeId: item.personTypeId,
          },
        });
      } else {
        this.$router.push({
          name:
            item.moduleId == 516
              ? "classicalArtistDetail"
              : item.moduleId == 518
              ? "nationalArtistDetail"
              : "jazzArtistDetail",
          params: {
            personId: item.personId,
            personTypeId: item.personTypeId,
          },
        });
      }
      // this.setArtist(item);
    },
    // ...mapMutations({
    //   setArtist: "SET_ARTIST",
    // }),
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
li {
  padding: 0 15px 30px;
  flex: 0 0 12.5%;
  max-width: 12.5%;
  cursor: pointer;
  .cover {
    position: relative;
    z-index: 2;
    padding-top: 100%;
    border-radius: 50%;
    background-color: #d9d9d9;
    .el-image {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
      }
      &:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.05) inset,
          -1px -1px 0 rgba(0, 0, 0, 0.05) inset;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.05),
          inset -1px -1px 0 rgba(0, 0, 0, 0.05);
      }
    }
  }
  .info {
    margin-top: 15px;
    text-align: center;
    .name {
      font-weight: 700;
      font-size: 16px;
      // line-height: 18px;
      word-break: break-word;
    }
    // .count {
    //   font-size: 12px;
    //   margin-top: 10px;
    //   color: #fa2800;
    // }
  }
}
</style>
